// src/pages/inspection/MethodManage.vue
<template>
	<div class="method-manage">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>检验方式设定</span>
					<el-button type="primary" size="small" @click="openDialog('add')">新增方式</el-button>
				</div>
			</template>

			<el-table :data="methodList" stripe border>
				<el-table-column prop="code" label="检验编号" width="120" />
				<el-table-column prop="name" label="检验名称" width="160" />
				<el-table-column prop="method" label="方法" />
				<el-table-column prop="materialType" label="建材类型" />
				<el-table-column prop="standard" label="检验标准" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button type="primary" size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button type="danger" size="small" @click="deleteMethod(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="检验编号">
					<el-input v-model="form.code" />
				</el-form-item>
				<el-form-item label="检验名称">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="方法">
					<el-input v-model="form.method" />
				</el-form-item>
				<el-form-item label="建材类型">
					<el-input v-model="form.materialType" />
				</el-form-item>
				<el-form-item label="检验标准">
					<el-input v-model="form.standard" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref } from 'vue'

export default {
	setup() {
		const methodList = ref([
			{
				code: 'M001',
				name: '抗压强度检测',
				method: '物理检测',
				materialType: '混凝土',
				standard: 'GB/T 50081'
			},
			{
				code: 'M002',
				name: '成分分析',
				method: '化学分析',
				materialType: '钢材',
				standard: 'GB/T 222'
			},
			{
				code: 'M003',
				name: '抗弯性能测试',
				method: '物理检测',
				materialType: '复合板材',
				standard: 'GB/T 1456'
			},
			{
				code: 'M004',
				name: '表面硬度测试',
				method: '物理检测',
				materialType: '陶瓷',
				standard: 'GB/T 2411'
			},
			{
				code: 'M005',
				name: '吸水率测定',
				method: '物理检测',
				materialType: '砖石材料',
				standard: 'GB/T 2542'
			},
			{
				code: 'M006',
				name: '抗冻性能检测',
				method: '环境模拟',
				materialType: '混凝土',
				standard: 'GB/T 50082'
			},
			{
				code: 'M007',
				name: '甲醛释放量测试',
				method: '化学分析',
				materialType: '人造板',
				standard: 'GB/T 17657'
			},
			{
				code: 'M008',
				name: '热导率检测',
				method: '热学测试',
				materialType: '保温材料',
				standard: 'GB/T 10294'
			},
			{
				code: 'M009',
				name: '密度测定',
				method: '物理检测',
				materialType: '泡沫材料',
				standard: 'GB/T 6343'
			},
			{
				code: 'M010',
				name: '耐磨性测试',
				method: '机械磨损',
				materialType: '地坪涂层',
				standard: 'GB/T 1768'
			}
		])


		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增检验方式' : '编辑检验方式'
			dialogVisible.value = true
			if (type === 'edit') {
				form.value = { ...row }
				currentIndex.value = methodList.value.findIndex(i => i.code === row.code)
			} else {
				form.value = { code: '', name: '', method: '', materialType: '', standard: '' }
				currentIndex.value = -1
			}
		}

		const submitForm = () => {
			if (currentIndex.value >= 0) {
				methodList.value[currentIndex.value] = { ...form.value }
			} else {
				methodList.value.push({ ...form.value })
			}
			dialogVisible.value = false
		}

		const deleteMethod = (row) => {
			methodList.value = methodList.value.filter(i => i.code !== row.code)
		}

		return {
			methodList,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			submitForm,
			deleteMethod
		}
	}
}
</script>

<style scoped>
.method-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
